<template>
	<div class="app-container">


		<!-- 查询参数 -->

		<div class="search-wrapper">
			<el-form class="search-param" ref="pageParam" :model="pageParam" label-width="100px" size="mini">
				<el-form-item label="型号">
					<el-input v-model="pageParam.batModel" clearable></el-input>
				</el-form-item>
				<el-form-item style="margin-left: -60px;">
					<el-button type="primary" size="mini" class="el-icon-search" @click="pageByParam">确认查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 数据表格 -->
		<vxe-toolbar ref="xToolbar1" custom>
			<template #buttons>
				<vxe-button v-if="auto.btnauto(2301)" status="success" size="mini" class="el-icon-circle-plus-outline" @click="addEditClick({})">新增
				</vxe-button>
				<vxe-button v-if="auto.btnauto(2304)" status="danger" size="mini" class="el-icon-delete" @click="handleDelete(-1)">批量删除
				</vxe-button>
			</template>
		</vxe-toolbar>
		<vxe-table show-overflow :column-config="{resizable: true}" :height="cheight-350" :loading="loading"
			:data="tableData.list" @checkbox-change="checkboxchange" @checkbox-all="checkboxall" size="mini" border
			stripe>
			<vxe-column type="checkbox" width="60"></vxe-column>
			<vxe-column type="seq" title="序号" width="60"></vxe-column>
			<!-- <vxe-column field="id" title="ID"></vxe-column> -->
			<vxe-column field="batModel" title="型号"></vxe-column>
			<vxe-column field="maxTemp" title="最大支持温度(℃)"></vxe-column>
			<vxe-column field="minTemp" title="最小支持温度(℃)"></vxe-column>
			<vxe-column field="ratedBatV" title="额定电压(V)"></vxe-column>
			<vxe-column field="singBatNum" title="电池单体数量"></vxe-column>
			<vxe-column field="tempNum" title="温度探针数量"></vxe-column>
			<!-- <vxe-column field="createTime" title="创建时间"></vxe-column>
			<vxe-column field="createUserId" title="创建人"></vxe-column>
			<vxe-column field="editTime" title="修改时间"></vxe-column>
			<vxe-column field="editUserId" title="修改人"></vxe-column>
			<vxe-column field="operationDepartment" title="运营部门"></vxe-column>
			<vxe-column field="pd" title="生产日期"></vxe-column>
			<vxe-column field="sd" title="销售日期"></vxe-column> -->
			<vxe-column title="操作" width="130" show-overflow>
				<template #default="{ row }">
					<vxe-button v-if="auto.btnauto(2302)" status="primary" icon="el-icon-edit" @click="addEditClick(row)"></vxe-button>
					<vxe-button v-if="auto.btnauto(2303)" status="success" icon="el-icon-delete" @click="handleDelete(row.id)"></vxe-button>
				</template>
			</vxe-column>
			<!-- <vxe-column field="_X_ID" title="_X_ID"></vxe-column> -->
		</vxe-table>
		<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageIndex"
			:page-size="pageParam.pageSize" :total="tableData.totalRow"
			:page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
			:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" background
			class="page-wrapper" @page-change="handleCurrentChange">
		</vxe-pager>
		<!-- 新增与编辑 -->
		<add-edit ref="addEdit" @oldlist="oldlist"></add-edit>
	</div>
</template>

<script>
	import request from '@/utils/request'
	import addEdit from './add_edit.vue'
	import {
		list,
		del
	} from './index.js'
	export default {
		components: {
			addEdit
		},
		data() {
			return {
				loading: true,
				cheight: document.documentElement.clientHeight,
				timer: [],
				pageParam: {
					batModel: '', //型号
					pageIndex: 1,
					pageSize: 20,
				},
				delist: [], //多选idlist
				tableData: {
					totalRow: 0,
					list: []
				}
			}
		},
		created() {
			this.oldlist();
		},
		methods: {
			pageByParam() {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = 20;
				this.oldlist()
			},
			handleCurrentChange(val) {
				console.log(val);
				if (val.type == "size") {
					this.pageParam.pageIndex = 1;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
				if (val.type == "current") {
					this.pageParam.pageIndex = val.currentPage;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
			},
			//多选
			checkboxchange(e) {
				this.idlist = [];
				e.records.forEach(item=>{
					this.idlist.push(item.id);
				})
			},
			checkboxall(e) {
				this.idlist = [];
				e.records.forEach(item=>{
					this.idlist.push(item.id);
				})
			},
			// handleSizeChange(val) {
			// 	this.pageParam.pageIndex = 1;
			// 	this.pageParam.pageSize = val;
			// 	this.oldlist();
			// },
			// handleCurrentChange(val) {
			// 	console.log(val);
			// 	this.pageParam.pageIndex = val;
			// 	this.oldlist();
			// },
			async oldlist() {
				this.loading = true;
				// if (this.timer != null && this.timer.length > 0) {
				// 	this.pageParam.stime = this.timer[0]
				// 	this.pageParam.etime = this.timer[1]
				// } else {
				// 	this.pageParam.stime = null;
				// 	this.pageParam.etime = null;
				// }
				let result = await list(this.pageParam);
				//console.log("返回结果", result.data);
				this.loading = false;
				this.tableData.totalRow = result.data.total;
				this.tableData.list = result.data.list;

			},
			addEditClick(item) {
				this.$refs.addEdit.open(item);
			},
			// 删除
			handleDelete(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if(id==-1){
						this.del(this.idlist);
					}else{
						this.del([id]);
					}
				})
			},
			async del(id) {
				if(id.length>0){
					let result = await del(id);
					if (result.code == 1) {
						this.msgSuccess("删除成功");
						this.oldlist();
					}
					console.log(result)
				}else{
					this.msgError("请先选择删除的数据");
				}
				
			}
		}
	}
</script>

<style>
</style>
